<template>
	<el-main style="padding:0 20px;">
		<el-card shadow="never" style="padding: 0 0 60px 0;">
				<el-descriptions title="产品信息" :column="1"  label-class-name="my-label" border>

					<el-descriptions-item  label="id" >{{data.id}}</el-descriptions-item>
					<el-descriptions-item  label="货号">
						<el-input placeholder="货号" style="width: 320px;"  v-model="data.goods_number" />
					</el-descriptions-item>
					<el-descriptions-item  label="品名" >
						<el-input placeholder="品名" style="width: 320px;" v-model="data.goods_desc" />
					</el-descriptions-item>
					<el-descriptions-item  label="客户" >
						<el-select ref="companySelect" placeholder="客户" @change="companyChange" v-model="data.company_id">
							<el-option v-for="item in company" :label="item.company_name" :key="item.id" :value="item.id"></el-option>
						</el-select>
					</el-descriptions-item>

					<el-descriptions-item  label="品牌" >
						<el-select ref="signSelect" placeholder="品牌"  v-model="data.company_sign_id">
							<el-option v-for="item in sign" :label="item.company_sign" :key="item.id" :value="item.id"></el-option>
						</el-select>
					</el-descriptions-item>

					<el-descriptions-item  v-for="item in all_sku"  :key="item.id" :label="item.sku_name" >
						<el-checkbox-group   @change="checkSku" v-if="item.sku_name == '颜色'" v-model="checkColor">
							<draggable @end="sortEnd" :list="item.sku_values" animation="300">
								<template #item="{ element }">
						    		<el-checkbox border :key="element.id" :label="element.id" >{{element.value}}</el-checkbox>
						    	</template>
						    </draggable>
						    <el-button @click="skuAdd(item)" icon="el-icon-plus">添加颜色</el-button>
						</el-checkbox-group>

						<el-checkbox-group  @change="checkSku" v-if="item.sku_name == '尺码'" v-model="checkSize">
							<draggable @end="sortEnd" :list="item.sku_values" animation="300">
								<template #item="{ element }">
						    		<el-checkbox border :key="element.id" :label="element.id" >{{element.value}}</el-checkbox>
						    	</template>
						    </draggable>
						    <el-button @click="skuAdd(item)" icon="el-icon-plus">添加尺码</el-button>
						</el-checkbox-group>
					</el-descriptions-item>


					<el-descriptions-item  label="填表" >
						<el-table border :data="sku_price_show" style="font-size: 18px">
							<el-table-column prop="color" label="颜色">
								<template #default="scope">
									{{scope.row.color}}
								</template>
							</el-table-column>

							<el-table-column prop="size" label="尺码">
								<template #default="scope">
									{{scope.row.size}}
								</template>
							</el-table-column>

							<el-table-column prop="price" label="价格">
								<template #default="scope">
									<el-container>
										<div class="left-panel"><el-input type="number" placeholder="价格" v-model="scope.row.price" /></div>
										<div class="right-panel"><el-button circle size="mini" icon="el-icon-mouse" type="primary" @click="allPatch('price', scope.row.price)" ></el-button></div>
									</el-container>
								</template>
							</el-table-column>

							<el-table-column prop="stock" label="库存">
								<template #default="scope">
								<el-container>
									<div class="left-panel"><el-input placeholder="库存" v-model="scope.row.stock" /></div>
									<div class="right-panel"><el-button circle size="mini" icon="el-icon-mouse" type="primary" @click="allPatch('stock', scope.row.stock)" ></el-button></div>
								</el-container>
								</template>
							</el-table-column>

							<el-table-column prop="stock" label="内部码(对方的)">
								<template #default="scope">
								<el-container>
									<div class="left-panel"><el-input placeholder="填写内部码" v-model="scope.row.code" /></div>
								</el-container>
								</template>
							</el-table-column>

						</el-table>
					</el-descriptions-item>
				</el-descriptions>
		</el-card>	

		<el-footer style="position: fixed; bottom: 0px; z-index: 10; width: 865px; padding:0 0 15px 0" >
			<el-button type="primary" @click="submit" :loading="loading" style="margin-bottom:10px; width: 100%; height: 50px;font-size: 24px">{{ loading ? '提交中 ...' : '保 存' }}</el-button>
		</el-footer>
	</el-main>
	
	
	

	<sku-dialog v-if="dialog.save" ref="skuDialog" @success="handleSaveSuccess" @closed="dialog.save=false"></sku-dialog>
</template>

<script>
	import skuDialog from './sku'
	import draggable from 'vuedraggable';
	import cloneDeep from 'lodash/cloneDeep'
	export default {
		emits: ['success'],
		components: {
		    draggable,
		    skuDialog
		},
		data() {
			return {
				data: {
					id: ""
				},
				labelStyle: {
					'min-width': '60px'
				},
				mode: 'add',
				loading: false,
				dialog: {
					save: true
				},
				checkColor: [],
				checkSize: [],

				company: [],
				sign: [], // 显示用
				all_sign: [], // 所有的

				check_sku: [],
				all_sku: [],

				sku_price_show: [],
				sku_price: [], // 已经填的数据 
				goods_sku: [], // 修改参数需要 该产品共用了多少skuvalue  目前不知道什么作用
			}
		},
		mounted() {

		},
		methods: {
			// 在现有中的查找
			getSkuItem(type, sku_value_id) {
				for (var i in this.all_sku) {
					if (this.all_sku[i].sku_name == type) {
						for (var j in this.all_sku[i].sku_values) {
							if (sku_value_id == this.all_sku[i].sku_values[j].id) {
								return this.all_sku[i].sku_values[j]
							}
						}

					}
				}

			},

			// 制作库存表格
			makeSKUTable () {
				this.sku_price_show = []
				var _show = []
				for (var c in this.checkColor) {
					var color_item = this.getSkuItem('颜色', this.checkColor[c]);
					for (var s in this.checkSize) {
						var size_item =  this.getSkuItem('尺码', this.checkSize[s]);
						//这里赋值 需要数据 
						var item = {
							color: color_item.value,
							size: size_item.value,
							stock: "",
							price: "",
							code: "", // 外部码
							sku_value_id: [
								color_item.id, size_item.id
							],
							price_id: ""
						}
						this.goods_sku.push(color_item.id)
						this.goods_sku.push(size_item.id)
						
						this.goods_sku = [...new Set(this.goods_sku)]

						_show.push(item)
					}
				}

				this.sku_price_show = _show

				if (this.mode == 'edit') {
					this.inputSkuTable(); //填表
				}


			},
			// 如果是编辑 填表
			inputSkuTable() {
				// 表格制作完填表
				for (var ss in this.sku_price) {
					var color_id = this.sku_price[ss].color_id
					var size_id = this.sku_price[ss].size_id
					var stock = this.sku_price[ss].stock
					var price = this.sku_price[ss].price
					var price_id = this.sku_price[ss].price_id
					var code_o = ""
					if (this.sku_price[ss].code) {
						code_o = this.sku_price[ss].code.code
					}
					

					for (var x in this.sku_price_show) {
						// 填写数据 跟 表格里 颜色尺码对的上
						//var is_input = false  // 是否填写

						if (this.sku_price_show[x].sku_value_id.indexOf(color_id) !== -1 && this.sku_price_show[x].sku_value_id.indexOf(size_id) !== -1) {
							// 都在数组里 填写 STOCK PRICE
							this.sku_price_show[x].stock = stock
							this.sku_price_show[x].price = price
							this.sku_price_show[x].price_id = price_id
							this.sku_price_show[x].code = code_o
						}

					}
				}
			},
			checkSku() {
				// 勾选参数
				this.makeSKUTable()
			},
			skuAdd(row) {
				this.dialog.save = true
				this.$nextTick(() => {
					this.$refs.skuDialog.open().setData(row)
				})
			},
			async sortEnd() {
				//console.log(this.all_sku)
				//提交修改排序
				var updateSort = []
				for (var i in this.all_sku) {

					for (var j in this.all_sku[i].sku_values) {
						var item = {
							sku_value_id: this.all_sku[i].sku_values[j].id,
							od: j
						}

						updateSort.push(item)
					}

				}

				await this.$API.sku.sort.post({updateSort: updateSort});

			},
			// 获取选中的数据
			async getSkuChecked() {

				var reqData = {}

				if (this.mode == 'edit') {
					reqData = {
						id : this.data.id
					}
				}

				var res = await this.$API.goods.getSkuChecked.get(reqData);
				this.checkColor = res.data.color
				this.checkSize = res.data.size
				this.sku_price = res.price_data
				this.all_sku = res.all_sku
				this.makeSKUTable()
				// 设置 选中的颜色

			},
			// 获取已经填写的数据
			async getPriceChecked() {
				console.log(this.sku_price_show);
			},

			//注入数据
			setData(mode, data, company, sign){
				this.mode = cloneDeep(mode)
				this.data = cloneDeep(data)
				this.company = cloneDeep(company)
				this.all_sign = cloneDeep(sign)

				
				if (this.mode == 'edit') {
					this.setSign(this.data.company_id)
					this.getSkuChecked()
				} else {
					this.data = {
						id: "",
						goods_number: "",
						goods_desc: "",
						company_id: "",
						company_sign_id : "",
					}
					this.getSkuChecked()
					

				}
				

			},

			//配置当前公司有的sign
			setSign(company_id) {
				this.sign = []  // 初始化
				for(var item in this.all_sign) {
					if (this.all_sign[item].company_id == company_id) {
						this.sign.push(this.all_sign[item])
					}
				}

				// 默认填写第一个
				this.data.company_sign_id = ""
				this.data.company_sign_id = this.sign[0].id
			},	

			companyChange(company_id) {
				this.setSign(company_id)
			},
			//  sku 添加成功后
			handleSaveSuccess(data, mode) {
				if (mode == "add") {
					for (var i in this.all_sku) {
						if (this.all_sku[i].id == data.sku_id) {
							this.all_sku[i].sku_values.push(data)
						}
					}
				}
			},

			//批量设置价格库存
			allPatch(type, num) {
				for(var i in this.sku_price_show) {
					this.sku_price_show[i][type] = num
				}
			},

			// 修改产品 配置参数
			getParams() {
				this.loading = true
				console.log(this.sku_price_show)

				var goods = {
					company_id : this.data.company_id,
					company_sign_id : this.data.company_sign_id,
					goods_number : this.data.goods_number,
					goods_desc: this.data.goods_desc,
					goods_sku: this.goods_sku, // 数据库中用来显示勾了那些 可以不用但必须传
					sku_price: [],
				}

				for (var i in this.sku_price_show) {
					var params = {
						price: this.sku_price_show[i].price,
						stock: this.sku_price_show[i].stock,
						price_id : this.sku_price_show[i].price_id,
						code: this.sku_price_show[i].code,
						sku_value_id: this.sku_price_show[i].sku_value_id,
					}
					goods.sku_price.push(params)
				}
				return goods;
			},

			async submit() {

				var res
				var reqData
				if (this.mode == 'edit') {
					reqData = {
						goods_id: this.data.id,
						goods: this.getParams()
					}
					res = await this.$API.goods.edit.post(reqData)
					this.loading = false
				} else {
					// add
					reqData = {
						data: {goods: [this.getParams()]}
					}

					res = await this.$API.goods.add.post(reqData)
					this.loading = false
				}
				this.$emit('success')

				if (res.code == 200) {
					this.$alert(res.message, "提示", {type: 'success'})
				} else {
					this.$alert(res.message, "提示", {type: 'error'})
				}

			}
		}
	}
</script>

<style>

	.el-checkbox {
		width: 150px;
		margin-bottom: 5px;
	}

	.el-checkbox__label {
		font-size: 18px;
	}
	.drag-container {
		display: flex;
		cursor: move;

	}
	.drag-item {
		margin: 5px;
		padding: 10px;
		border: 1px solid #ccc;
	}

	.my-label{
		min-width: 60px;
	}
</style>
